<template>
	<div class="right-container">
		<a-tabs default-active-key="1" @change="callback" size="small">
			<a-tab-pane key="1" tab="组织信息">
				<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
					<a-form-model-item ref="name" label="组织名称" prop="name">
						<a-input v-model="form.name" @blur="
					        () => {
					          $refs.name.onFieldBlur();
					        }
					      " />
					</a-form-model-item>
					<a-form-model-item ref="daima" label="统一社会信用代码" prop="daima">
						<a-input v-model="form.daima" @blur="
						      () => {
						        $refs.daima.onFieldBlur();
						      }
						    " />
					</a-form-model-item>
					<a-form-model-item ref="address" label="注册地址" prop="address">
						<a-input v-model="form.address" @blur="
						      () => {
						        $refs.address.onFieldBlur();
						      }
						    " />
					</a-form-model-item>
					<a-form-model-item ref="telAddress" label="通讯地址" prop="telAddress">
						<a-input v-model="form.telAddress" @blur="
						      () => {
						        $refs.telAddress.onFieldBlur();
						      }
						    " />
					</a-form-model-item>
					<a-form-model-item label="组织类型" prop="type">
						<a-select v-model="form.type" placeholder="请选择组织类型">
							<a-select-option value="0">
								社会服务组织/社会工作机构
							</a-select-option>
							<a-select-option value="1">
								社会组织
							</a-select-option>
							<a-select-option value="2">
								志愿组织
							</a-select-option>
							<a-select-option value="3">
								枢纽型组织
							</a-select-option>
							<a-select-option value="4">
								基金会
							</a-select-option>
							<a-select-option value="5">
								群团组织
							</a-select-option>
							<a-select-option value="6">
								党政部门
							</a-select-option>
							<a-select-option value="7">
								事业单位
							</a-select-option>
							<a-select-option value="8">
								其他
							</a-select-option>
						</a-select>
					</a-form-model-item>
					<a-form-item label="服务提供">
						<a-select mode="tags" style="width: 100%" :token-separators="[',']" @change="handleChange">
							<a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
								选项{{ i }}
							</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="联系人">
						<div v-for="(domain, index) in form.domains" :key="domain.key" class="c-flex">
							<!-- v-bind="index === 0 ? formItemLayout : {}" -->
							<a-form-model-item labelCol="{span: 4, offset: 12}" style="margin-right:20px;"
							 label="姓名">
								<a-input v-model="domain.name" />
							</a-form-model-item>
							<a-form-model-item labelCol="{span: 4, offset: 12}" style="margin-right:20px;"
							 label="手机号">
								<a-input v-model="domain.phone" />
							</a-form-model-item>
							<a-form-model-item labelCol="{span: 4, offset: 12}" style="margin-right:20px;"
							 label="办公电话">
								<a-input v-model="domain.bPhone" />
							</a-form-model-item>
							<a-form-model-item labelCol="{span: 4, offset: 12}" style="margin-right:20px;"
							 label="邮箱">
								<a-input v-model="domain.email" />
							</a-form-model-item>
							<!-- <a-input
						        v-model="domain.value"
						        placeholder="请输入"
						      /> -->
							<a-icon v-if="form.domains.length > 1" class="dynamic-delete-button" type="minus-circle-o" :disabled="form.domains.length === 1"
							 @click="removeDomain(domain)" />
						</div>
					</a-form-item>
					<a-form-model-item label="新增联系人">
						<a-button type="dashed" style="width: 60%" @click="addDomain">
							<a-icon type="plus" /> 点击新增
						</a-button>
					</a-form-model-item>
					<a-form-item label="管理员">
						<div v-for="(domain, index) in form.domains" :key="domain.key" class="c-flex">
							<!-- v-bind="index === 0 ? formItemLayout : {}" -->
							<a-form-model-item labelCol="{span: 4, offset: 12}" style="margin-right:20px;"
							 label="姓名">
								<a-input v-model="domain.name" />
							</a-form-model-item>
							<a-form-model-item labelCol="{span: 4, offset: 12}" style="margin-right:20px;"
							 label="手机号">
								<a-input v-model="domain.phone" />
							</a-form-model-item>
							<a-form-model-item labelCol="{span: 4, offset: 12}" style="margin-right:20px;"
							 label="办公电话">
								<a-input v-model="domain.bPhone" />
							</a-form-model-item>
							<a-form-model-item labelCol="{span: 4, offset: 12}" style="margin-right:20px;"
							 label="邮箱">
								<a-input v-model="domain.email" />
							</a-form-model-item>
							<!-- <a-input
										        v-model="domain.value"
										        placeholder="请输入"
										      /> -->
							<a-icon v-if="form.domains.length > 1" class="dynamic-delete-button" type="minus-circle-o" :disabled="form.domains.length === 1"
							 @click="removeDomain(domain)" />
						</div>
					</a-form-item>
					<a-form-model-item label="新增管理员">
						<a-button type="dashed" style="width: 60%" @click="addDomain">
							<a-icon type="plus" /> 点击新增
						</a-button>
					</a-form-model-item>
					<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
						<a-button type="primary" @click="onSubmit">
							提交
						</a-button>
						<a-button style="margin-left: 10px;" @click="resetForm">
							重置
						</a-button>
					</a-form-model-item>
				</a-form-model>
			</a-tab-pane>
			<a-tab-pane key="2" tab="订阅信息">
				
			</a-tab-pane>
		</a-tabs>
	</div>
</template>

<script>
	export default {
		name: "setting",
		data() {
			return {
				labelCol: {
					span: 4
				},
				wrapperCol: {
					span: 14
				},
				other: '',
				form: {
					name: '',
					daima: '',
					address: '',
					telAddress: '',
					region: undefined,
					date1: undefined,
					delivery: false,
					type: [],
					resource: '',
					desc: '',
					domains: [{}],
				},
				fileList: [{
					uid: '-1',
					name: 'xxx.png',
					status: 'done',
					url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
					thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
				}, ],
				rules: {
					name: [{
						required: true,
						message: '请输入组织名称',
						trigger: 'blur'
					}, ],
					daima: [{
							required: true,
							message: '请输入统一社会信用代码',
							trigger: 'blur'
						},
						{
							min: 18,
							max: 18,
							message: '统一社会信用代码必须为18位',
							trigger: 'blur'
						},
					],
					region: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					date1: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					type: [{
						type: 'array',
						required: true,
						message: '请选择',
						trigger: 'change',
					}, ],
					resource: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}, ],
					desc: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
				},
			};
		},
		methods: {
			onSubmit() {
				this.$refs.ruleForm.validate(valid => {
					if (valid) {
						this.$message.success('提交成功')
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm() {
				this.$refs.ruleForm.resetFields();
			},
			removeDomain(item) {
				let index = this.form.domains.indexOf(item);
				if (index !== -1) {
					this.form.domains.splice(index, 1);
				}
			},
			addDomain() {
				this.form.domains.push({
					value: '',
					key: Date.now(),
				});
			},
		},
	}
</script>

<style scoped>

</style>
